<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户详情</title>
    <script th:src="@{/static/js/jquery-3.6.0.js}"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"
</head>
<body>
<table class="table table-striped">
    <tr>
        <th>用户信息</th>
    </tr>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>password</th>
        <th>operation</th>
    </tr>
    <tr th:each="userMap: ${userMapSet}">
        <td th:text="${userMap.key}"></td>
        <td th:text="${userMap.value.name}"></td>
        <td th:text="${userMap.value.password}"></td>
        <td>
            <a class="_deleteUser" th:href="@{/delete(id=${userMap.key})}">删除</a>
            <a th:href="@{/getUser(id=${userMap.key})}">修改</a>
        </td>
    </tr>
</table>
<form id="delete_form" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<script type="text/javascript">
    $(function () {
        $("._deleteUser").click(function (event) {
            // 清除默认请求方式 , 使a标签不能发送get请求
            event.preventDefault()
            // 获取隐藏form表单
            var $deleteForm = $("#delete_form");
            // 给表单添加属性 动态添加url
            $deleteForm.attr("action", event .target.href)
            // 提交请求
            $deleteForm.submit()
        })
    })
</script>
</body>
</html>